<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:22:02
-->
<template>
  <div class="admin_result_box">
    <el-page-header
      class="admin_result_goBack"
      @back="$router.go(-1)"
    />
    <div class="admin_result_header">
      {{ currentUser.name }}的核酸检测结果记录
    </div>
    <el-empty
      v-if="Object.keys(resultInfo).length === 0"
      description="暂无数据"
    />
    <el-timeline v-else class="admin_result_main">
      <el-timeline-item
        v-for="(value, key, index) in resultInfo"
        :key="index"
        :timestamp="key"
        placement="top"
      >
        <el-card
          class="admin_result_card"
          v-for="item in value"
          :key="item.reagentBottleId"
        >
          <span class="admin_result_card_header">核酸检测结果</span>
          <div v-if="item.result === '阴性'" class="admin_result_card_neg">{{ item.result }}</div>
          <div v-else class="admin_result_card_pos">{{ item.result }}</div>
          <el-divider/>
          <div style="margin-bottom: 5px;">
            <span class="admin_result_card_label">检测机构</span>
            <span class="admin_result_card_content">{{ item.institution }}</span>
          </div>
          <div style="margin-bottom: 5px;">
            <span class="admin_result_card_label">检测时间</span>
            <span class="admin_result_card_content">{{ item.showSamplingTime }}</span>
          </div>
          <div style="margin-bottom: 5px;">
            <span class="admin_result_card_label">试剂瓶编号</span>
            <span class="admin_result_card_content">{{ item.reagentBottleId }}</span>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import {
  adminCheckNATR
} from '@/api/admin/adminUser'
export default {
  data() {
    return {
      currentUser: {},
      resultInfo: {}
    }
  },
  created() {
    this.currentUser = this.$store.getters['admin/getCurrentUser'];
    adminCheckNATR(this.currentUser).then((originData) => {
      const data = [];
      originData.forEach(item => {
        if (item !== null) {
          data.push(item);
        } else {
          console.error('exist null');
        }
      });
      data.forEach((item) => {
        let str = item.samplingTime.substr(0, 19);
        str = str.replaceAll('T', ' ');
        item.showSamplingTime = str;
      });
      const tmp = {};
      data.sort((a, b) => {
        if (a.samplingTime < b.samplingTime) return 1;
        else return -1;
      }).forEach(item => {
        let str = item.showSamplingTime.substr(0, 10);
        str = str.replaceAll('-', '/');
        if (!tmp[str]) {
          tmp[str] = [];
        }
        tmp[str].push(item);
      });
      for (const item in tmp) {
        this.$set(this.resultInfo, item, tmp[item]);
      };
    });
  },
  methods: {
  }
}
</script>

<style lang="scss">
.admin_result_box {
  background: #FFFFFF;
  width: 80%;
  min-width: 600px;
  margin: 50px auto 0px auto;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);

  .admin_result_goBack {
    padding: 10px 0px 0px 10px;
  }

  .admin_result_header {
    padding: 20px 0px 20px 5%;
    font-size: 24px;
    font-weight: bold;
  }

  .admin_result_main {
    margin: 20px 10% 0px 10%;
  }

  .admin_result_card {
    width: 80%;
    margin: 20px;

    .admin_result_card_header {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .admin_result_card_neg {
      float: right;
      text-align: center;
      background-color: #67C23A;
      color: #FFFFFF;
      line-height: 40px;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      transform: translate(25%, -25%);
      cursor: default;
    }

    .admin_result_card_pos {
      float: right;
      text-align: center;
      background-color: #F56C6C;
      color: #FFFFFF;
      line-height: 40px;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      transform: translate(25%, -25%);
      cursor: default;
    }

    .admin_result_card_label {
      font-weight: bold;
    }
    
    .admin_result_card_content {
      float: right;
      color: #909399;
    }

    .admin_result_card_label {
      font-weight: bold;
    }
    
    .admin_result_card_content {
      float: right;
      color: #909399;
    }
  }
}

</style>
